<template>
  <div>
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-8 col-sm-12">
                <div class="raceType">
                  <span>分类：</span>
                  <span class="link active" @click="GetContestLimit">全部</span>
                  <span class="link" @click="GetContestLimit(undefined,undefined,queryType,1,genre)">可报名</span>
                  <span class="link" @click="GetContestLimit(undefined,undefined,queryType,2,genre)">进行中</span>
                  <span class="link" @click="GetContestLimit(undefined,undefined,queryType,3,genre)">已结束</span>
                </div>
                <div class="raceType">
                  <span>分类：</span>
                  <span class="genre active"
                        @click="GetContestLimit(undefined,undefined,queryType,status,undefined,$event)">全部</span>
                  <template v-for="(el,index) in genreArr">
              <span class="genre" v-bind:key="index"
                    @click="GetContestLimit(undefined,undefined,queryType,status,el._id,$event)">{{ el._id }}</span>
                  </template>
                </div>
              </div>
              <div class="col-md-3  col-sm-12 mt-md-3">
                <form class="d-flex" role="search">
                  <input v-on:keyup.enter="searchContest" v-model="formQuery" class="form-control me-2" type="search" placeholder="输入竞赛"
                         aria-label="Search">
                  <span class="iconfont icon-sousuo"   @click="searchContest"></span>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <template v-if="contestData.length!==0">
        <template v-for="el in contestData">
          <div class="col-sm-12 col-md-12 mt-3 mb-1" v-bind:key="el._id">
            <div class="card position-relative myPanel">
              <div class="panel position-absolute">
                 <span class="panel-child animate__animated animate__bounceIn" @click="ContestDetail(el)">去组队</span>
              </div>
              <div class="row g-0">
                <div class="col-md-4">
                  <img style="width: 100%;height: 100%" :src="'http://127.0.0.1/'+el.img" class="img-fluid rounded-start"
                       alt="">
                </div>
                <div class="col-md-8">
                  <div class="card-body">
                    <h4 class="card-title mb-4" style="font-weight: 600">{{ el.name }}</h4>
                    <p class="card-text text-secondary ps-4">报名时间：{{ el.applyStartDate|time }}至{{
                        el.applyEndtDate|time
                      }}</p>
                    <p class="card-text text-secondary ps-4">竞赛时间：{{ el.startDate|time }}至{{ el.endDate|time }}</p>
                    <p class="card-text text-secondary ps-4">参加对象：<span
                        style="color: #0065ff;font-weight: 600">全体在校学生</span>&emsp;类型：<span
                        style="color: #0065ff;font-weight: 600">{{ el.raceType === 'T1' ? '团队赛' : '个人赛' }}</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <div class="col">
          <el-empty class="border" description="暂无竞赛"></el-empty>
        </div>
      </template>
    </div>
    <div class="row mb-4 mt-4">
      <div class="col-md-12 col-sm-12">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

import user from "../../../api/user";
import time from "../../../filter/time"

export default {
  name: "typePage",
  data() {
    return {
      isVisible: true,
      raceType: [],
      genreArr: '',
      status: undefined,
      contestData: '',
      total: 0,
      pageSize: 5,
      queryType: undefined,
      genre: undefined,
      formQuery: undefined,
      isShow:false
    }
  },
  mounted() {
    this.GetContestLimit()
    this.initBtn()
    this.GetRaceType()
  },
  components: {},
  filters: {
    time
  },
  methods: {
    // 搜索竞赛
    searchContest() {
      if (this.formQuery) {
        const param = {
          limitNum: undefined, skipNum: undefined, formQuery: this.formQuery
        }
        user.searchContest(param).then(r => {
          this.contestData = r.data.data.data

          this.total = r.data.data.count
        })
      }
    },
    initBtn() {
      const span = document.querySelectorAll(".link")
      span.forEach(s => {
        s.addEventListener('click', () => {
          span.forEach(v => {
            v.classList.remove("active")
          })
          s.classList.add("active")
        })
      })
    },
    // 详细页面
    ContestDetail(el) {
      localStorage.setItem("detailId", JSON.stringify(el._id))
      this.$router.push("/detail")
    },
    GetRaceType() {
      user.GetRaceType().then(r => {
        this.genreArr = r.data.data.genre
      })
    },
    // 当前页改变请求数据
    handleCurrentChange(page) {
      this.GetContestLimit(this.pageSize, this.pageSize * (page - 1), this.queryType, this.status, this.genre)
    },
    // 页面条数改变
    handleSizeChange(size) {
      this.pageSize = size
      this.GetContestLimit(size, 0)
    },
    // 分页竞赛
    GetContestLimit(limit, skip, type, status, genre, e) {

      // 激活active
      if (e) {
        const g = document.querySelectorAll(".genre")
        g.forEach(v => {
          v.classList.remove("active")
        })
        e.target.classList.add("active")
      }
      this.$router.replace("/typePage").catch(()=>{
        console.log("路由内部错误")
      })
      this.queryType = type
      this.status = status
      this.genre = genre
      const param = {
        limitNum: limit,
        skipNum: skip,
        raceType: this.queryType,
        status: this.status,
        genre: this.genre
      }
      user.GetContest(param).then(r => {
          this.isVisible = false
          this.contestData = r.data.data.data
          this.total = r.data.data.count
      })
    },
  }
}
</script>

<style scoped>

.topTitle {
  margin: 20px 0;
}

.el-breadcrumb:nth-child(2) {
  margin-top: 20px;
}

.active /deep/ .is-link {
  color: cornflowerblue;
}

.el-breadcrumb-item-child {
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
  border: 1px solid silver;
}

.el-breadcrumb-item-child /deep/ .el-card__body {
  width: 96%;
  display: flex;
}

.child-content {
  padding-left: 10px;
}

.child-title {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 20px;
}

.child-content-item > div {
  margin-top: 20px;
}


.el-tag {
  position: absolute;
  right: 0;
  top: 10px;
  transform: rotateZ(45deg) translateY(-40px);
  width: 90px;
  height: 45px;
  text-align: right;
}

.tag-title {
  position: absolute;
  left: 0;
  transform: translate(35px, 20px);
}

.raceType:not(:first-child) {
  margin-top: 20px;
}

.raceType > span:not(:first-child) {
  margin-left: 15px;
}

.active {
  color: #40aaff;
}

.link, .genre {
  cursor: pointer;
}
.panel{
  left: 0;
  top:0;
  height: 100%;
  width: 100%;
  color: white;
  display: none;
  text-align: center;
  background: rgba(0,0,0,0.5);
}
.panel-child{
  border-radius: 50%;
  display: block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
  font-size: 21px;
}

.myPanel:hover .panel{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

</style>